<template>
  <div class="sideNavBox w_100 h_100">
    <div class="logoBox">
      <!-- <div id="suport">
              <div id="smash">
                  <div id="translateShadow">
                      <div id="rotateImg"></div>
                  </div>
              </div>
          </div> -->
      <div class="header">
        <span class="headimg"
          ><i
            class="el-icon-s-custom"
            style="color: #09419d; font-size: 55px"
          ></i
        ></span>
        <span class="namebox">
          <i class="name">{{ userName }}</i>
          <i class="sfen">{{ privilege }}</i>
        </span>
      </div>
    </div>

    <el-menu
      :default-active="this.$route.path"
      active-text-color="#6485F0"
      router
      :unique-opened="true"
    >
      <!-- 导航展开状态 -->
      <div v-for="item in sideNavMenu" :key="item.id">
        <!-- 导航2曾 层有子级 -->
        <el-submenu
          :index="item.id"
          v-if="item.children && item.children.length > 0"
        >
          <template slot="title">
            <!-- <Icon :type="item.icon" /> -->
            <i :class="item.icon"></i>
            <span slot="title">{{ item.menuName }}</span>
          </template>
          <el-menu-item
            v-for="(sub, index02) in item.children"
            :key="index02"
            :index="'/home' + sub.url"
          >
            <!-- <Icon :type="item.icon" class="iconStyle" style="padding-right:15px;" /> -->

            <span>{{ sub.menuName }}</span>
          </el-menu-item>
        </el-submenu>
        <!-- 导航一层无子级别 -->
        <el-menu-item :index="'/home' + item.url" v-else>
          <i :class="item.icon" style="padding-right: 15px"></i>
          <span slot="title">{{ item.menuName }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "sideNav",
  data() {
    return {
      sideNavMenu: [],
      selected: "/index",
      active: "/login",
      openNames: ["信息采集"],
      userName: "",
      privilege: "",
    };
  },
  methods: {
    selectMenu(menu) {
      this.active = `${menu}`;
      this.$router.push(`${menu}`);
    },

    //  eachTree(tree,urlval){
    //     // if(tree.length>0){
    //     //       for(var i=0;i<tree.length;i++){
    //     //           var a=tree[i].children;
    //     //         if(tree[i].children>0){
    //     //             this.eachTree(a);
    //     //         }
    //     //         alert(parentName)
    //     //       }
    //     // }

    //   } ,

    // search_info(arr,search){
    //   var len = arr.length;
    //   for(var i=0;i<len;i++){
    //     if(arr[i].children.length==0){
    //       if(arr[i]['url'] ==search){
    //         this.openNames=arr[i]['parentName'];
    //         // this.$nextTick(() => {
    //         //   this.$refs.side_menu.updateOpened()
    //         //   this.$refs.side_menu.updateActiveKey()
    //         // });
    //           break; //查找到以后  return   不在继续执行     递归的主要思想  一层套一层   函数结束则是 从最内层调用依次返回结束
    //       }
    //     }else{
    //         //判断是否有children  如果有children 在判断 children是否是数组 如果是   者自己调用自己 将 children传入函数进行 数组 更深一层的循环
    //         // if(arr[i].hasOwnProperty("children") && Array.isArray(arr[i].children)){
    //         if(arr[i].children.length>0){
    //           this.search_info(arr[i].children,search);  //递归调用
    //         }

    //     }
    //   }
    // }
  },
  created() {
    this.sideNavMenu = JSON.parse(
      localStorage.getItem("loginInfo")
    ).sysMenuTreeDTOList;
    this.userName = JSON.parse(
      localStorage.getItem("loginInfo")
    ).sysUserDTO.loginName;
    this.privilege = JSON.parse(
      localStorage.getItem("loginInfo")
    ).sysUserDTO.postName;
  },
  // watch:{
  //   $route(to,from){
  //       this.selectMenu(to.path); //选中
  //       this.openNames="长住人"
  //       // var routeLink=to.path.substring(5); //跳转的路径
  //       // let navTree=JSON.parse( localStorage.getItem("loginInfo")).sysMenuTreeDTOList;  //获取导航树
  //         // this.eachTree(navTree,to.path)   ;
  //           // this.search_info(navTree,routeLink);
  //   },
  // },
};
</script>

<style lang="less" scoped>
.sideNavBox {
  background: #09419d;
  .el-menu {
    padding: 0px;
    font-size: 16px;
    text-align: left;
    border-right: none;
    background: none;
  }
  .el-menu > div {
    border-bottom: 1px solid #366fcd;
  }
  .el-menu .el-submenu > .el-submenu__title {
    padding-left: 30px !important;
  }

  .el-menu-item i {
    color: #303133;
    padding-right: 5px !important;
  }
  .el-submenu i {
    color: #fff;
  }
  .el-menu-item.is-active i {
    color: #21d277;
  }
  .logoBox {
    height: 80px;
    background: #09419d;
    position: relative;
    line-height: 80px;
    font-size: 26px;
    color: #fff;
    padding-left: 40px;
    text-align: left;
    margin-bottom: 30px;
    .header {
      display: flex;

      .headimg {
        flex: 0 0 auto;
        display: inline-block;
        width: 68px;
        height: 68px;
        border-radius: 34px;
        background: #fff;
        margin-top: 26px;
        text-align: center;
      }
      .namebox {
        flex: 0 0 auto;
        display: inline-block;
        color: #fff;
        line-height: 20px;
        padding-top: 40px;
        padding-left: 20px;
        .name {
          display: block;
          font-size: 24px;
          font-style: normal;
          padding-bottom: 10px;
        }
        .sfen {
          display: block;
          font-size: 16px;
          font-style: normal;
        }
      }
    }
  }
  .el-menu-item {
    font-size: 16px;
  }
}
</style>
<style>
.sideNavBox .el-menu .el-submenu .el-submenu__title:hover {
  background-color: #09419d !important;
}
.sideNavBox .el-menu .el-submenu .el-submenu__title i {
  color: #fff !important;
}
.sideNavBox .el-submenu__title {
  font-size: 16px;
  color: #fff;
}

:root {
  --animation-duration: 1s;
}

#suport {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}
#smash {
  animation-name: smash;
  animation-duration: var(--animation-duration);
  animation-direction: alternate;
  animation-iteration-count: 2;
  /*infinite*/
  animation-timing-function: ease-in-out;
  transform-origin: bottom;
}
#translateShadow,
#rotateImg {
  border-radius: 50%;
  display: inline-block;
  width: 50px;
  height: 50px;
}
#translateShadow {
  animation-name: translateShadow;
  animation-duration: var(--animation-duration);
  animation-direction: alternate;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
}

#rotateImg {
  background: url("../assets/logo.png") no-repeat center center;
  background-size: 100%;
  width: 50px;
  height: 50px;
  /* border-radius: 25px; */
  /* background:#ccc; */
  animation-name: rotateImg;
  animation-duration: calc(var(--animation-duration) * 5.3);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes translateShadow {
  0% {
    transform: translateY(0);
    box-shadow: 20px 20px 10px #444466;
  }
  100% {
    transform: translateY(-60px);
    box-shadow: 20px 100px 160px #444466;
  }
}
@keyframes smash {
  0% {
    transform: scaleY(0.7);
  }
  15% {
    transform: scaleY(1);
  }
}
@keyframes rotateImg {
  /* 100% {transform:rotate(360deg)} */
}
</style>

